<template>
	<div class="news-list maxW">
		<div class="top-menu">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/home/newsList' }">通知列表</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="news-list-content">
			<div class="list-content-l">
				<ul>
					<li v-for="(item, index) of categoryData" :key="index" :class="[item.id == category.id ? 'list-item active' : 'list-item']" @click="getNewsList(item)">
						{{ item.name }}
						<i class="el-icon-arrow-right"></i>
					</li>
				</ul>
				<p v-if="placeholder">- 暂无分类 -</p>
			</div>
			<div class="list-content-r">
				 <h3 v-if="category.name">{{category.name}}</h3>
				<ul>
					<li class="list-item clear" v-for="(item1, index1) of newsListData" :key="index1">
						<router-link class="news-poster fl" :to="{ path: '/home/newsDetail', query: { id: item1.id } }">
							<img v-if="item1.picture != ''" :src="BASE_URL + item1.picture" title="封面图" />
							<div v-else class="no-poster">- 暂无封面 -</div>
						</router-link>
						<div class="news-info fr">
							<router-link class="news-name" :to="{ path: '/home/newsDetail', query: { id: item1.id } }">{{ item1.name }}</router-link>
							<div class="news-content" v-html="item1.content"></div>
							<p class="creater-info">
								<span>{{ item1.username }}</span>
								<span>{{ item1.friend_time }}</span>
								<span>{{ item1.clicks }}人查看</span>
							</p>
						</div>
					</li>
				</ul>
				<div class="page-box" 	v-if="data_sum > page_size">
					<el-pagination
						@current-change="changePage"
						:page-size="page_size"
						:current-page="page_index"
						layout="total,prev, pager, next,jumper"
						:total="data_sum"
					></el-pagination>
				</div>

				<div class="news-placeholder" v-if='newsListData.length===0'>
				    <img src="../../../assets/images/news-list.png" >
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			categoryData: [], //左侧公告分类数据
			category: {}, //选中的分类
			newsListData: [], //右侧公告列表数据
			// 右侧分页
			page_index: 1,
			page_size: 5,
			data_sum: 0,
			placeholder: false,
		};
	},
	created() {
		this.getCategory();
	},
	methods: {
		// 获取左侧公告分类数据
		getCategory() {
			let success = res => {
				this.categoryData = res.data;
				res.data.length != 0 ?  this.getNewsList(res.data[0]) : '';
				this.placeholder =  res.data.length > 0 ? false : true;
			};
			this.$ajax({
				url: 'api/news/news_category',
				method: 'get',
				params: {},
				func: {
					success: success
				}
			});
		},
		//根据公告分类的id去获取对应的新闻列表信息
		getNewsList(item) {
			this.category = item;
			let success = res => {
				this.newsListData = deep_clone(res.data.data);
                this.data_sum = res.data.data_sum;
			};
			this.$ajax({
				url: 'api/news/news_list',
				method: 'get',
				params: {
					category_id: item.id,
					page_index: this.page_index,
					page_size: this.page_size
				},
				func: {
					success: success
				}
			});
		},
		//分页
		changePage(val) {
			this.page_index = val;
			this.getNewsList(this.category);
		}
	}
};
</script>
<style lang="scss">
.news-list {
	padding-bottom: 40px;
	.top-menu {
		margin: 30px 0 20px;
    }
    .news-list-content{
        display: flex;
        justify-content: space-between;
        min-height: 650px;
    }
	.list-content-l {
		display: inline-block;
		width: 240px;
		background-color: #fff;
		padding: 20px 0;
		>p{
		    color: #999;
		    font-size:16px;
		    text-align: center;
		    padding: 50px 0;
		}
		.list-item {
			height: 60px;
			line-height: 60px;
			text-indent: 26px;
			color: #333;
			position: relative;
			cursor: pointer;
			i {
				position: absolute;
				top: 22px;
				right: 20px;
			}
		}
		.active {
			background: #e8f2ff;
			color: #348efc;
		}
	}
	.list-content-r {
		display: inline-block;
		width: calc(100% - 260px);
		background-color: #fff;
		padding: 30px 20px;
		box-sizing: border-box;
		.news-placeholder{
		    text-align: center;
		    padding: 80px 0 ;
		}
		h3 {
			font-size: 16px;
			font-weight: bold;
			line-height: 21px;
			margin-bottom: 30px;
		}
		.list-item:first-of-type {
			border-top: 1px solid #e0e0e0;
		}
		.list-item {
			padding: 30px 0;
			border-bottom: 1px solid #e0e0e0;
		}
		.news-poster {
			display: inline-block;
			width: 300px;
			height: 180px;
			border: 1px solid #ddd;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.news-info {
			display: inline-block;
			width: calc(100% - 302px);
			padding: 10px 20px;
			box-sizing: border-box;
			color: #333;
			.news-name {
				display: block;
				font-size: 18px;
				line-height: 24px;
				margin-bottom: 30px;
			}
			.news-content {
				width: 100%;
				height: 80px;
				line-height: normal;
				word-wrap: break-word;
				word-break: break-all;
				overflow-y: auto;
			}
			.creater-info {
				margin-top: 20px;
				span:nth-child(2) {
					margin: 0 10px;
				}
			}
		}
	}
	.no-poster {
		height: 100%;
		text-align: center;
		vertical-align: middle;
		line-height: 180px;
		color: #ccc;
	}
	.page-box {
		height: 52px;
		padding-top: 20px;
	}
}
</style>
